<template></template>

<script lang="ts" setup>
import { addMarker, IMarker, map, ILine } from "../store";
import { onMounted, PropType, watch, inject, onUnmounted } from "vue";
import basicIcon from "@/assets/images/marker.png";
const addSymbol = inject("addSymbol") as Function;
const removeSymbol = inject("removeSymbol") as Function;
const updateSymbol = inject("updateSymbol") as Function;
const props = defineProps({
  data: {
    type: Object as PropType<ILine>,
    required: true,
  },
});
watch(
  () => props.data,
  (newData) => {
    console.log("update", props.data);
    updateSymbol(convertSymbol());
  },
  {
    deep: true,
  }
);
const convertSymbol = () => {
  return {
    type: "Feature",
    geometry: {
      type: "LineString",
      coordinates: props.data.content.map((item) => [
        item.longtitude,
        item.latitude,
      ]),
    },
    properties: props.data.properties,
  };
};
onMounted(() => {
  addSymbol(convertSymbol());
});
onUnmounted(() => {
  removeSymbol({ id: props.data.id });
});
</script>

<style lang="scss" scoped></style>
